<template>
  <div class="channel-nav">
    <ul>
      <li v-for="item in channelNavList" :key="item.id">
        <a :href="item.href">
          <img :src="item.imgUrl" alt="">
        </a>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data () {
    return {
      channelNavList: []
    }
  },
  created () {
    this.getChannelNav()
  },
  methods: {
    async getChannelNav () {
      const { data: res } = await this.$axios.get('home/indexchannelnav')
      if (res.code === 1) {
        this.channelNavList = res.data
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../../assets/css/mixin';
.channel-nav {
  width: px2rem(720 / 2);
  height: px2rem(304 / 2);
  margin: 0 auto;
  ul {
    height: px2rem(304 / 2);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    li {
      width: 20%;
      img {
        width: 100%;
      }
    }
  }
}
</style>
